<template>
  <div class="PerEc">
    <div class="PerEc-head">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>员工奖惩</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="PerEc-neck">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-input
            v-model="searchText"
            placeholder="请输入员工姓名"
            prefix-icon="el-icon-search"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="searchPerEc"
            ><i class="el-icon-search"></i>搜索</el-button
          >
        </el-col>
        <el-col :span="4"
          ><el-button type="primary" @click="PerEcAddDialog = true"
            ><i class="el-icon-plus"></i>增加</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div class="PerEc-main">
      <template>
        <el-table :data="employeeec" style="width: 100%">
          <el-table-column width="60" type="selection" />
          <el-table-column label="员工编号" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.row.eid }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="180" align="center">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.employee.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="奖罚时间" width="140" align="center">
            <template slot-scope="scope">
              {{ scope.row.ecDate }}
            </template>
          </el-table-column>
          <el-table-column label="奖罚原因" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.ecReason }}
            </template>
          </el-table-column>
          <el-table-column label="奖罚分" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.row.ecPoint }}
            </template>
          </el-table-column>
          <el-table-column label="奖罚类别" width="80" align="center">
            <template slot-scope="scope">
              <el-tag size="medium" type="warning" v-if="scope.row.ecType == 1">罚</el-tag>
              <el-tag size="medium" type="success" v-else-if="scope.row.ecType == 0"
                >奖</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="备注" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-popconfirm
                confirmButtonText="确定"
                cancelButtonText="不用了"
                icon="el-icon-info"
                iconColor="red"
                title="这条记录确定删除吗？"
                confirmButtonType="danger"
                @onConfirm="handleDelete(scope.$index, scope.row)"
              >
                <el-button
                  size="mini"
                  type="danger"
                  slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="page.pageSize"
            :total="PerEcNum"
            @current-change="getAllEc"
          >
          </el-pagination>
        </div>
      </template>
    </div>

    <el-dialog title="增加" :visible.sync="PerEcAddDialog" width="60%" center>
      <table>
        <tr>
          <td>
            <span>员工编号：</span>
            <el-input
              v-model="addEmployeeec.eid"
              placeholder="请输入内容"
              style="width: 220px"
            ></el-input>
          </td>
          <td>
            <span>奖罚原因：</span>
            <el-input
              v-model="addEmployeeec.ecReason"
              placeholder="请输入内容"
              style="width: 220px"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>
            <span>奖罚分数：</span>
            <el-input-number
              v-model="addEmployeeec.ecPoint"
              :min="1"
              :max="10"
              label="label"
              style="width: 220px"
            ></el-input-number>
          </td>
          <td>
            <span>奖罚类别：</span>
            <el-radio v-model="addEmployeeec.ecType" :label="0">奖</el-radio>
            <el-radio v-model="addEmployeeec.ecType" :label="1">罚</el-radio>
          </td>
        </tr>
        <tr>
          <td>
            <span>奖罚备注：</span>
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="addEmployeeec.remark"
              maxlength="20"
              show-word-limit
              style="width: 220px"
            >
            </el-input>
          </td>
          <td>
            <span>奖罚时间：</span>
            <el-date-picker
              v-model="addEmployeeec.ecDate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </td>
        </tr>
      </table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="PerEcAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="addPerEc()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="PerEcDialog" width="60%" center>
      <table>
        <tr>
          <td>
            <span>奖罚时间：</span>
            <el-date-picker
              v-model="editEmployeeec.ecDate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </td>
          <td>
            <span>奖罚原因：</span>
            <el-input
              v-model="editEmployeeec.ecReason"
              placeholder="请输入内容"
              style="width: 220px"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>
            <span>奖罚分数：</span>
            <el-input-number
              v-model="editEmployeeec.ecPoint"
              :min="1"
              :max="10"
              label="label"
              style="width: 220px"
            ></el-input-number>
          </td>
          <td>
            <span>奖罚类别：</span>
            <el-radio v-model="editEmployeeec.ecType" :label="0">奖</el-radio>
            <el-radio v-model="editEmployeeec.ecType" :label="1">罚</el-radio>
          </td>
        </tr>
        <tr>
          <td>
            <span>奖罚备注：</span>
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="editEmployeeec.remark"
              maxlength="20"
              show-word-limit
              style="width: 220px"
            >
            </el-input>
          </td>
        </tr>
      </table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="PerEcDialog = false">取 消</el-button>
        <el-button type="primary" @click="editPerEc()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PerEc",
  data() {
    return {
      searchText: "",
      employeeec: [],
      PerEcDialog: false,
      PerEcAddDialog: false,
      editEmployeeec: {
        ecDate: "",
        ecReason: "",
        ecPoint: "",
        ecType: "",
        remark: "",
      },
      addEmployeeec: {
        eid: "",
        ecDate: "",
        ecReason: "",
        ecPoint: "",
        ecType: "",
        remark: "",
      },
      page: {
        pageNum: 1,
        pageSize: 4,
        currentPage: 1,
      },
      PerEcNum: 0,
    };
  },
  created() {
    this.getAllEc();
  },
  methods: {
    searchPerEc(){
      if(this.searchText!=null&&this.searchText!=''){
         this.$axios.get(
        `employeeec/name?name=${this.searchText}`
      ).then((value) => { 
        this.employeeec=value.data.list;
        this.PerEcNum=value.data.total;
      }).catch((value) => {
        console.error(value);
      })
      }else{
        this.getAllEc(1);
      }
     
    },
    getPerEcNum() {
      this.$axios
        .get("employeeec/total")
        .then((value) => {
          this.PerEcNum = value.data;
        })
        .catch((value) => {
          console.error(value);
        });
    },
    getAllEc(index) {
      index ? (this.page.pageNum = index) : (this.page.pageNum = 1);
      this.$axios
        .get(
          `employeeec/all?pageNum=${this.page.pageNum}&pageSize=${this.page.pageSize}`
        )
        .then((value) => {
          this.employeeec = value.data.list;
          this.PerEcNum=value.data.total;
        })
        .catch((value) => {
          console.error(value);
        });
    },
    handleEdit(index, row) {
      this.PerEcDialog = true;
      this.editEmployeeec = row;
    },
    editPerEc() {
      this.$axios
        .post(
          "employeeec/",
          this.$qs.stringify({
            id: this.editEmployeeec.id,
            eid: this.editEmployeeec.eid,
            ecDate: this.editEmployeeec.ecDate,
            ecReason: this.editEmployeeec.ecReason,
            ecPoint: this.editEmployeeec.ecPoint,
            ecType: this.editEmployeeec.ecType,
            remark: this.editEmployeeec.remark,
          })
        )
        .then((value) => {
          if (value.data == 1) {
            this.$message({
              showClose: true,
              message: "编辑成功",
              type: "success",
            });
            this.getAllEc(this.page.pageNum);
          } else {
            this.$message({
              showClose: true,
              message: "编辑失败",
              type: "error",
            });
          }
        })
        .catch((value) => {
          console.error(value);
        });
      this.PerEcDialog = false;
    },
    handleDelete(index, row) {
      this.$axios
        .delete("employeeec/", {params:{ id: row.id }})
        .then((value) => {
          if (value.data == 1) {
            this.$message({
              showClose: true,
              message: "删除成功",
              type: "warning",
            });
            this.getAllEc(this.page.pageNum);
          } else {
            this.$message({
              showClose: true,
              message: "删除失败",
              type: "error",
            });
          }
        })
        .catch((value) => {
          console.error(value);
        });
    },
    // delPerEc(row) {
      
    // },
    addPerEc() {
      this.$axios
        .put("employeeec/", this.$qs.stringify(this.addEmployeeec))
        .then((value) => {
          if (value.data == 1) {
            this.$message({
              showClose: true,
              message: "增加成功",
              type: "success",
            });
            this.getAllEc(1);
          } else {
            this.$message({
              showClose: true,
              message: "增加失败",
              type: "error",
            });
          }
          this.PerEcAddDialog=false;
        })
        .catch((value) => {
          console.error(value);
        });
    },
    onloard2(){
      this.$axios.post(
          "basic/JobLevelController/getAllJobLevel"
      ).then((res) => {
          this.employeeAddFormJob = res.data;
      }).catch((value) => {
          console.error(value);
      })

      this.$axios.post(
        "basic/DepartmentController/listDepartment"
      ).then((res) => {
       this.employeeAddFormDept =  res.data;
      }).catch((value) => {
        console.error(value);
      })
    }
  },
  computed: {},
};
</script>

<style>
.PerEc-head {
  margin-bottom: 20px;
}
.PerEc-main {
  text-align: center;
}
</style>